<template>
    <el-tabs v-model="activeTag">
        <el-tab-pane label="修改菜单" name="menuUpdateTAG">
            <el-form ref="menuUpdateRef" :model="menuUpdate" :rules="rules" label-width="100px" :inline="true" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单类型" prop="menuType">
                            <el-select style="width: 260px;" v-model="menuUpdate.menuType" placeholder="菜单类型"
                                @change="checkMenuType">
                                <el-option label="目录" value="M" :disabled="getMenuTypeOptionMTypeIsActive" />
                                <el-option label="菜单" value="C" :disabled="getMenuTypeOptionCTypeIsActive" />
                                <el-option label="按钮" value="F" :disabled="true" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="name">
                            <el-input style="width: 260px;" v-model.trim="menuUpdate.name" maxlength="8"
                                placeholder="请输入菜单名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单图标" prop="icon" :required="menuIconIsRequired">
                            <menuIcon v-model="menuUpdate.icon" style="width: 260px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单排序" prop="sort">
                            <el-input-number style="width: 260px;" v-model.trim="menuUpdate.sort" controls-position="right"
                                :min="1" :max="99" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="路由组件" prop="component" :required="menuComponentIsRequired">
                            <el-input style="width: 260px;" v-model.trim="menuUpdate.component" maxlength="60"
                                placeholder="请输入菜单跳转所使用的组件路径"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="路由参数" prop="query">
                            <el-input style="width: 260px;" v-model.trim="menuUpdate.query" maxlength="20"
                                placeholder="请输入菜单跳转路由携带的参数"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单权限" prop="perms">
                            <el-input style="width: 260px;" v-model.trim="menuUpdate.perms" maxlength="30"
                                placeholder="请输入菜单的权限标识"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单备注" prop="remark">
                            <el-input style="width: 260px;" v-model.trim="menuUpdate.remark" maxlength="30"
                                placeholder="请输入菜单备注信息"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否启用" prop="isEnable">
                            <el-radio-group v-model="menuUpdate.isEnable">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否展示" prop="isShow">
                            <el-radio-group v-model="menuUpdate.isShow">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import menuIcon from './menuIcon.vue';
export default {
    components: { menuIcon },
    props: {
        //调用添加的级别,1级的父ID为强制为0,菜单类型强制为M
        addLavel: {
            type: String,
            required: true
        },
        menuUpdate: {
            type: Object,
            required: true,
        },
        rules: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            activeTag: "menuUpdateTAG",
            menuIconIsRequired: false,
            menuPathIsRequired: false,
            menuComponentIsRequired: false,
        };
    },
    methods: {
        //重置表单
        reset() {
            this.$refs.menuUpdateRef.resetFields();
        },
        //校验表单
        validate() {
            let checkResult = true;
            this.$refs.menuUpdateRef.validate((valid) => {
                checkResult = valid;
            })
            return checkResult;
        },
        //菜单类型变更触发校验必填项
        checkMenuType(value) {
            //校验图标和路由是否必填
            if (value !== 'F') {
                this.menuPathIsRequired = true
                this.menuIconIsRequired = true
            } else {
                this.menuPathIsRequired = false
                this.menuIconIsRequired = false
            }
            //校验路由组件是否必填
            if (value !== 'C') {
                this.menuComponentIsRequired = false
            } else {
                this.menuComponentIsRequired = true
            }
        },
    },
    computed: {
        //计算菜单类型选择框中的目录是否可选
        getMenuTypeOptionMTypeIsActive() {
            if (this.addLavel === "F" || (this.addLavel === "C" && this.menuUpdate.child.length > 0)) {
                return true;
            } else {
                return false;
            }
        },
        //计算菜单类型选择框中的菜单是否可选
        getMenuTypeOptionCTypeIsActive() {
            if (this.menuUpdate.menuType === 'F' || (this.menuUpdate.menuType === 'M' && this.menuUpdate.child.length > 0 && this.addLavel === 'M')) {
                return true
            } else {
                return false
            }
        },
        //计算菜单类型选择框是否可选
        getMenuTypeOptionIsActive() {
            if (this.menuUpdate.child) {
                return true;
            } else {
                return false;
            }
        }
    },
    beforeDestroy() {
        this.reset();
    },
};
</script>

<style scoped lang="scss"></style>
